<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- to 使用字符串 to属性的值就是路径 -->
    <router-link to="/user">地址1</router-link>
    <!-- to 键值对传参 字符串-->
    <router-link to="/user?id=1001&name=tom">地址2</router-link>
    <!-- to 键值对传参 对象方式-->
    <router-link :to="{path:'/user', query:{id:1001,name:'tom'}}">地址3</router-link>
    <hr>
    <!-- to 路径传参 字符串-->
    <router-link to="/user/1001">地址4</router-link>
    <!-- to 路径传参 对象方式-->
    <router-link :to="{name: 'user', params:{id:1003}}">地址5</router-link>

    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>

    // 路由规则
    const routes = [
      // name 路由规则的名称
      { path: '/user/:id', name: 'user', component: { template: `<div> 动态路由 {{$route.params.id}}</div>` } }
    ]
    // 实例化vue-router
    const router = new VueRouter({ routes })
    
    new Vue({
      el: '#app',
      // 挂载
      router
    })
  </script>
</body>

</html>